<template>
  <div class="face-capture">
    <div v-if="!cameraActive">
      <div class="camera-placeholder">
        <svg class="camera-icon" viewBox="0 0 48 48" width="48" height="48" fill="none">
          <rect x="8" y="16" width="32" height="20" rx="3" fill="var(--color-border)" />
          <circle cx="24" cy="26" r="6" fill="var(--color-primary)" />
          <rect x="18" y="8" width="12" height="8" rx="2" fill="var(--color-border)" />
        </svg>
        <div class="placeholder-text">请点击下方按钮启用摄像头</div>
      </div>
      <div class="capture-btn-row">
        <button class="primary-btn glow-btn" @click="enableCamera">启用人脸拍照</button>
      </div>
    </div>
    <div v-else>
      <video
        ref="video"
        autoplay
        playsinline
        width="240"
        height="180"
        v-show="!photoDataUrl"
      ></video>
      <canvas ref="canvas" width="240" height="180" style="display: none"></canvas>
      <div v-if="photoDataUrl" class="photo-preview">
        <img :src="photoDataUrl" alt="人脸照片预览" width="240" height="180" />
        <div class="btn-group">
          <button class="secondary-btn glow-btn" @click="retakePhoto">重拍</button>
        </div>
      </div>
      <div v-else class="btn-group">
        <button class="primary-btn glow-btn" @click="capturePhoto">拍照</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount, defineExpose } from 'vue'

const video = ref(null)
const canvas = ref(null)
const photoDataUrl = ref('')
const photoFile = ref(null)
const cameraActive = ref(false)
let stream = null

function enableCamera() {
  cameraActive.value = true
  startCamera()
}

async function startCamera() {
  try {
    stream = await navigator.mediaDevices.getUserMedia({ video: true })
    if (video.value) {
      video.value.srcObject = stream
    }
  } catch {
    alert('无法访问摄像头，请检查权限设置')
  }
}

onBeforeUnmount(() => {
  if (stream) {
    stream.getTracks().forEach((track) => track.stop())
  }
})

function capturePhoto() {
  const ctx = canvas.value.getContext('2d')
  ctx.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height)
  photoDataUrl.value = canvas.value.toDataURL('image/jpeg')
  // 转为 File 对象
  canvas.value.toBlob((blob) => {
    photoFile.value = new File([blob], `face_${Date.now()}.jpg`, { type: 'image/jpeg' })
  }, 'image/jpeg')
}

function retakePhoto() {
  photoDataUrl.value = ''
  photoFile.value = null
}

defineExpose({
  photoFile,
  photoDataUrl,
})
</script>

<style scoped>
.face-capture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.camera-placeholder {
  width: 240px;
  height: 180px;
  background: var(--color-surface, #f5f7fa);
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
}
.camera-icon {
  opacity: 0.5;
  margin-bottom: 0.3rem;
}
.placeholder-text {
  color: var(--color-text-secondary);
  font-size: 1rem;
  text-align: center;
}
.capture-btn-row {
  width: 100%;
  display: flex;
  justify-content: center;
}
.primary-btn,
.secondary-btn {
  background: var(--color-primary);
  color: var(--color-button-text);
  border: none;
  border-radius: 0.25rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s,
    box-shadow 0.2s,
    color 0.2s;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.primary-btn:hover:not(:disabled),
.glow-btn.primary-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
  color: var(--color-button-text);
  box-shadow: 0 0 28px 10px var(--color-primary-glow, #5eb3ff);
}
.secondary-btn {
  background-color: var(--color-button-disabled-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.secondary-btn:hover:not(:disabled),
.glow-btn.secondary-btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-button-text);
  box-shadow: 0 0 28px 10px var(--color-primary-glow, #5eb3ff);
}
.secondary-btn:disabled,
.primary-btn:disabled {
  background-color: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.photo-preview img {
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background: var(--color-input-bg);
}
.btn-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}
</style>
